<template>
  <div class="main" >  
  <div class="checkhead"><h1 class="stitle">用户注册</h1>
     
    </div>
    <div class="zhuce">

      <group title="账户设置"  label-width="6em" label-margin-right="2em" label-align="right">

        <x-input title="用户名" placeholder="请输入用户名" v-model="value1"></x-input>

        <x-input title="密码" type="password" placeholder="请输入密码" v-model="value4"></x-input>
        <x-input title="确认密码" type="password" placeholder="请再次输入密码" v-model="value4"></x-input>
        <x-input title="身份证号" type="password" placeholder="请输入身份证号" v-model="value4"></x-input>
        <x-input title="Email" type="password" placeholder="请输入Email" v-model="value4"></x-input>
        <x-input title="手机号码" type="password" placeholder="请输入手机号码" v-model="value4"></x-input>

      </group> 
      <group title="基本信息"  label-width="6em" label-margin-right="2em" label-align="right">
        <x-input title="公司中文名" placeholder="请输入公司中文名" v-model="value1"></x-input>
        <x-input title="公司英文名" placeholder="请输入公司英文名" v-model="value1"></x-input>
        <x-input title="统一社会信用代码" placeholder="请输入统一社会信用代码" v-model="value1"></x-input>
        <x-input title="组织机构代码" placeholder="请输入组织机构代码" v-model="value1"></x-input>

        <popup-picker title="企业性质" :data="list" v-model="value5" value-text-align="left"></popup-picker>
        <popup-picker title="所属区域" :data="list2" v-model="value6" value-text-align="left"></popup-picker>
         <x-input title="地址" placeholder="请输入地址" v-model="value1"></x-input>
         <x-input title="电话" placeholder="请输入电话" v-model="value1"></x-input>
         <x-input title="传真" placeholder="请输入传真" v-model="value1"></x-input>
        
        <cell :title="'业务系统'" value="请选择" is-link @click.native="showPopup=true"></cell>
        <div v-transfer-dom>
          <popup v-model="showPopup" class="checker-popup">
            <div style="padding:10px 10px 40px 10px;">
              <p style="padding: 5px 5px 5px 2px;color:#888;">请选择业务系统</p>
              <checker
              type="checkbox"
              v-model="demo4"
              default-item-class="demo4-item"
              selected-item-class="demo4-item-selected"
              disabled-item-class="demo4-item-disabled">
              <checker-item v-for="(i,index) in ['货物申报','物流动态','跨境电子商务','来往港澳小型国际船舶','易通关','出口退（免）税申报','保税加工管理','海关查验配套交互服务','信息查询','货物申报（标准版）','农药进出口许可申请','国际船舶舱单申报','原产地证','企业资质','野生动植物进出口证书申请','查询统计系统','运输工具申报','机电产品进口单证','有毒化学品']" :key="index" :value="i" @on-item-click="onItemClick"> {{['货物申报','物流动态','跨境电子商务','来往港澳小型国际船舶','易通关','出口退（免）税申报','保税加工管理','海关查验配套交互服务','信息查询','货物申报（标准版）','农药进出口许可申请','国际船舶舱单申报','原产地证','企业资质','野生动植物进出口证书申请','查询统计系统','运输工具申报','机电产品进口单证','有毒化学品'][index]}} </checker-item>
            </checker>
          </div>
        </popup>
      </div>

    </group>

 <div style="padding:15px;">
      <x-button type="primary">提　交</x-button>
    </div>

  </div>
  <div class="indfoot"><p style="text-align:center;">版权所有  佛山市电子口岸有限公司</p></div>

  



</div>
</template>

<script>
  import {  TransferDom } from 'vux'
  export default {
    name: 'Register',
    directives: {
      TransferDom
    },
    methods: {
      onItemClick (value, disabled) {
        console.log(value, disabled)
      // if (!this.disabled) {
      //   this.showPopup = false
      // }
    }
  },
  data () {
    return {
      'value5':[''],
      list: [['私营企业', '国有企业', '中外合作企业', '外商独资企业', '其他']],'value6':[''],
      list2: [['禅城区', '南海区', '顺德区', '高明区', '三水区', '其他']],
      'demo4':'',
      showPopup: false,
      demo6: []
    }
  }
}
</script>




<style scoped>
  .box {
    padding: 0 15px;
  }

  .demo4-item {
    background-color: #ddd;
    color: #222;
    font-size: 14px;
    padding: 5px 10px;
    margin-right: 10px;
    line-height: 18px;
    border-radius: 15px;
    margin-bottom: 13px;
  }
  .demo4-item-selected {
    background-color: #FF3B3B;
    color: #fff;
  }
  .demo4-item-disabled {
    color: #999;
  }

  .demo5-item {
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-right: 6px;
    padding: 3px;
    margin-left: 3px;
    margin-bottom: 3px;
  }
  .demo5-item-selected {
    background: #ffffff url(../assets/demo/checker/active.png) no-repeat right bottom;
    border-color: #ff4a00;
  }
</style>